<template>
  <base-modal ref="baseRef" @reset="onReset" @ok="onOK" @cancel="onCancel">
    <view
      @click="() => (choice = null)"
      style="display: flex; height: 80rpx; line-height: 80rpx; justify-content: space-between">
      <view style="font-size: 30rpx; margin-left: 30rpx" :style="{ color: !choice ? '#EDB302' : '#333' }">
        全部
      </view>
      <image
        v-if="!choice"
        style="width: 44rpx; height: 44rpx; margin-top: 10rpx; margin-right: 12rpx"
        src="https://static.tospurfang.com/asset/chose.png"
        mode="widthFix" />
    </view>
    <view
      @click="onItem(i)"
      style="display: flex; height: 80rpx; line-height: 80rpx; justify-content: space-between"
      v-for="i in cityStore().areas"
      :key="i.cityCode">
      <view
        style="font-size: 30rpx; margin-left: 30rpx"
        :style="{ color: choice?.cityCode == i.cityCode ? '#EDB302' : '#333' }">
        {{ i.cityName }}
      </view>
      <image
        v-if="choice?.cityCode == i.cityCode"
        style="width: 44rpx; height: 44rpx; margin-top: 10rpx; margin-right: 12rpx"
        src="https://static.tospurfang.com/asset/chose.png"
        mode="widthFix" />
    </view>
  </base-modal>
</template>

<script setup>
  import { cityStore } from '@/biz/city'
  import { ref } from 'vue'
  import baseModal from './base-modal.vue'

  const baseRef = ref(null)
  const choice = ref(null)
  const emits = defineEmits(['update:modelValue', 'blur'])
  const props = defineProps({
    modelValue: Object
  })
  defineExpose({
    show: () => {
      choice.value = props.modelValue
      baseRef.value.show()
    },
    hide: () => baseRef.value.hide()
  })
  const onReset = () => {
    choice.value = null
    emits('update:modelValue', choice.value)
    emits('blur')
  }
  const onOK = () => {
    emits('update:modelValue', choice.value)
    emits('blur')
  }
  function onCancel() {
    emits('blur')
  }
  const onItem = (i) => {
    choice.value = i
  }
</script>

<style></style>
